//Menu：Pane - The componet of aralle manu which clicks to change panel
const ids = ['aboutUs', 'orderNow', 'cakes', 'address', 'contactUs', 'homePage'];

const change = (id) => {
	//each page will display none after clicking 
	ids.forEach(v => document.getElementById(`${v}`).style.display = "none");
	document.getElementById(id).style.display = "flex";//only the cliced one can be shown
}

//Menu：responsive - Pane get data-* and when readable screen size bigger than 992, 
//it should have no target
ids.forEach(v => {
	const menuPanes = document.querySelector(`.${v}`);
	if(document.body.clientWidth>992){
		menuPanes.dataset.toggle = "";
		menuPanes.dataset.bsToggle = "";
		menuPanes.dataset.bsTarget = "";
	}
});

//Menu：responsive - The componet of hambergure button in menu changes the menu's height to 100%  when it's clicked
//Note: Using the bootstrap callbackfunction about collapse otherwise it's going to show a bug 
//that the navbar's size will change incorrect as using double click.
const navbar = document.querySelector('.navbar');
const myCollapsible = document.getElementById('navbarNavDropdown');
//collapse change to x 
const icon = document.querySelector('.navbar-toggler').children;
if(document.body.clientWidth<992){
	myCollapsible.addEventListener('shown.bs.collapse', () => {
		console.log("vv");
		navbar.style.height = "100%";
		navbar.style.backgroundColor = "black";
		//collapse hamburger
		icon[0].style.transform = "rotate(45deg)";
		icon[0].style.margin = "0";
		icon[1].style.transform = "rotate(-45deg)";
		icon[1].style.margin = "0px";
		icon[1].style.marginTop = "-4px";
		icon[2].style.display = "none";
	})
	
	myCollapsible.addEventListener('hidden.bs.collapse', () => {
		navbar.style.height = "auto";
		navbar.style.backgroundColor = "transparent";
		//back hamburger
		icon[0].style.transform = "none";
		icon[0].style.margin = "2px";
		icon[1].style.transform = "none";
		icon[1].style.margin = "2px";
		icon[2].style.display = "block";
	})
}

//google map
function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
